<template>
  <div class="comment">
    <!-- 获取评论
    1：定义获取评论api
    2:导入
    3：进入页面调用
    4：存储数据并渲染
    5：上拉加载
       van-list
           v-model:是否处于加载中，默认false
           finished:是否加载完成
           finished-text:加载完成的文本内容
           @load:调用接口加载
                  加载完成
                     1：将v-model的值变为false
                     2:数据要累加存储
                     3：修改下一页请求的条件
                     4：判断是否加载完成
                        如果完成finished=true   -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <div class="item" v-for="(item, index) in list" :key="index">
        <img class="avatar" :src="item.aut_photo" alt="" />
        <div class="middle">
          <div class="name">{{ item.aut_name }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="time">
            <span class="curr-time">{{ item.pubdate | formatDate }}</span>
            <span @click="reClick(item)">回复({{ item.reply_count }})</span>
          </div>
        </div>
        <!-- 点赞：
        1：定义api
        2:导入
        3：点击时调用api
        4:调用完成：
           a:提示
           b:修改状态        
         -->
        <van-icon
          :class="{ active: item.is_liking }"
          name="like-o"
          @click="likeClick(item)"
        />
      </div>
    </van-list>
    <div class="bottom">
      <van-field v-model.trim="msg" placeholder="请输入评论内容">
        <template #button>
          <!-- 发表评论
            1：定义api
            2:导入
            3：点击发给时调用api
            4:发表成功后
                提示一下
                渲染刚发表的评论
                输入框的值要清空            
             -->
          <van-button size="small" type="info" @click="submit">发布</van-button>
        </template>
      </van-field>
    </div>
    <!-- 回复评论 -->
    <ReComment
      ref="reComment"
      v-if="bol"
      @refreshRecomment="refreshRecomment"
    ></ReComment>
  </div>
</template>
<script>
import { comments, commentsPost, commentLikings } from '@/api/article'
import ReComment from './reComment.vue'
export default {
  components: {
    ReComment
  },
  data () {
    return {
      bol: true,
      msg: '',
      list: [],
      loading: false,
      finished: false,
      offset: null
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    async getData () {
      const res = await comments({
        type: 'a',
        source: this.$route.params.id,
        offset: this.offset,
        limit: 1
      })
      //   1:修改v-model的值为false
      this.loading = false
      //   2：数据累加存储
      this.list.push(...res.data.data.results)
      //   3：修改下一页请求的条件
      this.offset = res.data.data.last_id
      //   4：判断是否加载完成
      if (res.data.data.last_id === res.data.data.end_id) {
        this.finished = true
      }

      //   console.log('评论', res)
    },
    // 发表评论
    async submit () {
      if (this.msg === '') {
        this.$toast.fail('请输入内容后发表！')
        return
      }
      //   调用接口发表评论
      const res = await commentsPost({
        target: this.$route.params.id,
        content: this.msg
      })
      //   提示
      this.$toast.success('评论成功')
      //   将评论数据添加到列表第一条
      this.list.unshift(res.data.data.new_obj)
      //   清空输入框内容
      this.msg = ''
      //   console.log('发表评论:', res)
    },
    // 回复点击
    reClick (item) {
      this.$refs.reComment.show = true
      this.$refs.reComment.reItem = item
    },
    // 刷新 reComment
    refreshRecomment () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    async likeClick (item) {
      await commentLikings(
        {
          target: item.com_id
        },
        item.is_liking
      )
      this.$toast.success(!item.is_liking ? '点赞成功' : '取消点赞成功')
      item.is_liking = !item.is_liking
    }
  }
}
</script>
<style lang="less" scoped>
.comment {
  padding: 20px 20px 60px 20px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}
.item {
  display: flex;
  margin-bottom: 15px;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
  }
  .middle {
    flex: 1;
    .name {
      color: #466b9d;
    }
    .content {
      padding: 6px 0;
      word-break: break-all;
      line-break: anywhere;
    }
    .time {
      .curr-time {
        color: #808080;
        padding-right: 10px;
      }
    }
  }
}
.active {
  color: red;
}
</style>
